<template>
  {{ firstName }} - {{ lastName }}
  <br>
  <el-input v-model="fullName" style="width: 200px;"></el-input>
</template>

<script setup>
  import { ref, computed } from "vue";
  const firstName = ref("周");
  const lastName = ref("亮");
  const fullName = computed({
    get() {
      return firstName.value + "-" + lastName.value;
    },
    set(newVal) {
      [firstName.value, lastName.value] = newVal.split("-");
    },
  });
</script>

<style lang="less" scoped>
</style>